<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta charset="utf-8">
    <title>统计</title>

    <!--  VUE -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- elementUI -->
    <link href="https://cdn.bootcss.com/element-ui/2.4.11/theme-chalk/index.css" rel="stylesheet">

    <!--<link href="https://cdn.bootcss.com/element-ui/2.4.11/theme-chalk/index.css" rel="stylesheet">-->


    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/echarts.min.js"></script>


</head>
<body>
<div id="app">

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="margin:20px auto; width: 500px;height:400px;"></div>

</div>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {



        },
        method: {}
    })




    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        title: {
            text: '月收入'
        },
        tooltip: {},
        legend: {
            data:['收入']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '收入',
            type: 'bar',
            data: [],
            color:'#62A8D1',  //圈圈的颜色

        }]
    });

    // 异步加载数据

    $.post("/verify/getDate", function(data){


        // 填入数据
        myChart.setOption({
            xAxis: {
                data: data.day
            },
            series: [{
                // 根据名字对应到相应的系列+
                name: '收入',
                data: data.money,

            }]
        });
    });

</script>
</body>

</html>